<!--
 * @Author: Coder_Yang
 * @description: 
 * @LastEditTime: 2025-08-12 14:32:57
-->
<!--
 * @Author: Coder_Yang
 * @description: 
 * @LastEditTime: 2025-08-12 14:29:36
-->
<template>
  <div style="overflow: auto;">
    <div class="header">
      <span style="text-align: right; margin-left: 10px">委托日期</span>
      <el-date-picker style="margin-left: 20px;" v-model="statReq.dlgDate1" value-format="yyyy-MM-dd HH:mm:ss"
        type="date" placeholder="选择起始日期"></el-date-picker>
      <span style="margin-left: 10px; margin-right: 10px">至</span>
      <el-date-picker v-model="statReq.dlgDate2" value-format="yyyy-MM-dd HH:mm:ss" type="date"
        placeholder="选择截至日期"></el-date-picker>
      <el-button type="primary" style="margin-left: 20px" size="small" @click="getSalemanStat()">
        统计
      </el-button>
    </div>
    <div style="display: flex" v-if="pageData">
      <card title="业务案件" :value="pageData.caseStat.sum" unit="个" type="danger" />
      <card title="未回款金额" :value="pageData.unReturnStat.sum" unit="元" type="warning" />
      <card title="回款金额" :value="pageData.returnStat.sum" unit="元" type="default" />
      <!-- <card title="待开票金额" :value="pageData.unBillStat.sum" unit="元" type="success" /> -->
      <card title="提成金额" :value="pageData.incomeStat.sum" unit="元" type="danger" />
    </div>

    <div
      style="background: #f3effe;margin: 10px;border-radius: 10px;padding: 5px;border-color: #7f5df2;border-width: 2px;border-style: solid;">
      <div style="display: flex;height: 400px;margin:20px">
        <div ref="caseMain" style="margin-top:20px;width:60%;"></div>
        <div ref="caseSub" style="margin-top:20px;width:40%;"></div>
      </div>
      <div style="display: flex;height: 400px;margin:20px">
        <div ref="caseTeam" style="margin-top:20px;width:100%;"></div>
      </div>
      <div v-if="caseVis">
        <el-table style="overflow: auto;margin:20px;width: 98%;" max-height="400px" :data="caseRes.Items" stripe border
          highlight-current-row>
          <el-table-column :label="caseReq.hosterTxt + ' ' + caseReq.insureTypeTxt + ' ' + caseReq.lossFeeTxt + ' 案件报表'"
            header-align="center">
            <el-table-column type="index" width="40"></el-table-column>
            <el-table-column label="案件号" prop="CS_No" width="160"></el-table-column>
            <el-table-column label="案件名" prop="CS_DisplayName"></el-table-column>
            <el-table-column label="险种" width="200">
              <template slot-scope="scope">
                {{ scope.row.FLOW_Name ? scope.row.FLOW_Name : scope.row.CS_InsureTypeDetails }}
              </template>
            </el-table-column>
            <el-table-column label="估损/定损金额" width="200">
              <template slot-scope="scope">
                {{ scope.row.CS_LossFee ? scope.row.CS_LossFee : scope.row.CS_EstimateLossFee }}元
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="toCase(scope.row.CS_ID)" type="text" size="small" icon="el-icon-search"
                  title="查看案件详情">
                  案件
                </el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div style="height: 40px;margin-bottom:20px;">
          <el-pagination layout="total,prev,pager,next,sizes" style="float: right" background
            :current-page.sync="caseReq.pageIndex" :total="caseRes.Total" :page-size="caseReq.pageSize"
            :page-sizes="[10, 15, 20]" @size-change="
              (val) => {
                caseReq.pageSize = val
                getCases()
              }
            " @current-change="getCases()"></el-pagination>
        </div>
      </div>
    </div>

    <div
      style="background: #edf3ff;margin: 10px;border-radius: 10px;padding: 5px;border-color: #317ef2;border-width: 2px;border-style: solid;">

      <div style="background: #c9e0f6;margin: 10px;border-radius: 10px;">
        <div style="display: flex;height: 400px;margin:20px">
          <div ref="unReturnDlg" style="margin-top:20px;width:100%;"></div>
        </div>

        <div v-if="unReturnCaseVis">
          <el-table style="overflow: auto;margin:20px;width: 98%;" max-height="400px" :data="unReturnCaseRes.Items"
            stripe border highlight-current-row>
            <el-table-column :label="unReturnCaseReq.cmpTxt + ' 未回款报表'" header-align="center">
              <el-table-column type="index" width="40"></el-table-column>
              <el-table-column label="案件号" prop="CS_No" width="160"></el-table-column>
              <el-table-column label="案件名称" prop="CS_DisplayName"></el-table-column>
              <el-table-column label="人员信息" width="180">
                <template slot-scope="scope">
                  <div v-for="item in scope.row.Employees" :key="item.CSEP_ID">
                    {{ item.CSEP_TypeDesc }}：{{ item.USR_Name ? '[' + item.USR_Name + ']' : '' }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="未回款" width="120">
                <template slot-scope="scope">{{ scope.row.UnreturnFee }}元</template>
              </el-table-column>
              <!-- <el-table-column label="案件名" prop="CS_DisplayName" width="300"></el-table-column> -->
              <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                  <el-button @click="toCase(scope.row.CS_ID)" type="text" size="small" icon="el-icon-search"
                    title="查看案件详情">
                    案件
                  </el-button>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <div style="height: 60px;margin-bottom:20px;">
            <el-pagination layout="total,prev,pager,next,sizes" style="float: right" background
              :current-page.sync="unReturnCaseReq.pageIndex" :total="unReturnCaseRes.Total"
              :page-size="unReturnCaseReq.pageSize" :page-sizes="[10, 15, 20]" @size-change="
                (val) => {
                  unReturnCaseReq.pageSize = val
                  getUnReturnCases()
                }
              " @current-change="getUnReturnCases()"></el-pagination>
          </div>
        </div>
      </div>

      <div style="background: #c9e0f6;margin: 10px;border-radius: 10px;">
        <div style="display: flex;height: 400px;margin:20px">
          <div ref="unReturnMain" style="margin-top:20px;width:60%;"></div>
          <div ref="unReturnSub" style="margin-top:20px;width:40%;"></div>
        </div>
        <div style="display: flex;height: 400px;margin:20px">
          <div ref="unReturnTeam" style="margin-top:20px;width:100%;"></div>
        </div>
        <div v-if="unReturnVis">
          <el-table style="overflow: auto;margin:20px;width: 98%;" max-height="400px" :data="unReturnRes.Items" stripe
            border highlight-current-row>
            <el-table-column
              :label="unReturnReq.hosterTxt + ' ' + unReturnReq.cmpTxt + ' ' + unReturnReq.monthsTxt + ' 未回款报表'"
              header-align="center">
              <el-table-column type="index" width="40"></el-table-column>
              <el-table-column label="购买方">
                <template slot-scope="scope">
                  {{ scope.row.BuyCompanyShortName ? scope.row.BuyCompanyShortName : scope.row.BuyCompanyName }}
                </template>
              </el-table-column>
              <el-table-column label="发票号码" prop="CSB_No" width="200"></el-table-column>
              <el-table-column label="开票日期" prop="CSB_No" width="120">
                <template slot-scope="scope">
                  {{ scope.row.CSB_BillDate | formatDate }}
                </template>
              </el-table-column>
              <el-table-column label="价税合计" prop="CSB_Fee" width="100"></el-table-column>
              <el-table-column label=" 未回款金额" width="100">
                <template slot-scope="scope">
                  <div style="color:red"> {{ scope.row.UnreturnSum1 }}元</div>
                </template>
              </el-table-column>
              <el-table-column label="案件号" prop="CS_No" width="160"></el-table-column>
              <!-- <el-table-column label="案件名" prop="CS_DisplayName" width="300"></el-table-column> -->
              <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                  <el-button @click="
                    curBill = scope.row
                  imageVis = true
                    " type="text" size="small" icon="el-icon-search" title="查看案件详情">
                    扫描件
                  </el-button>
                  <el-button @click="toCase(scope.row.CSB_CaseID)" type="text" size="small" icon="el-icon-search"
                    title="查看案件详情">
                    案件
                  </el-button>
                  <el-button v-if="scope.row.CBA_FormID" @click="toForm(scope.row.CBA_FormID)" type="text" size="small"
                    icon="el-icon-search" title="查看审核流程">
                    审核流程
                  </el-button>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <div style="height: 60px;margin-bottom:20px;">
            <el-pagination layout="total,prev,pager,next,sizes" style="float: right" background
              :current-page.sync="unReturnReq.pageIndex" :total="unReturnRes.Total" :page-size="unReturnReq.pageSize"
              :page-sizes="[10, 15, 20]" @size-change="
                (val) => {
                  unReturnReq.pageSize = val
                  getUnReturnBills()
                }
              " @current-change="getUnReturnBills()"></el-pagination>
          </div>
        </div>
      </div>
    </div>

    <div
      style="background: #fff8e6;margin: 10px;border-radius: 10px;padding: 5px;border-color: #fab300;border-width: 2px;border-style: solid;">
      <div style="display: flex;height: 400px;margin:20px">
        <div ref="returnMain" style="margin-top:20px;width:60%;"></div>
        <div ref="returnSub" style="margin-top:20px;width:40%;"></div>
      </div>
      <div style="display: flex;height: 400px;margin:20px">
        <div ref="returnTeam" style="margin-top:20px;width:100%;"></div>
      </div>
      <div v-if="returnVis">
        <el-table style="overflow: auto;margin:20px;margin-bottom:50px;width: 98%;" max-height="400px"
          :data="returnRes.Items" stripe border highlight-current-row>
          <el-table-column :label="returnReq.hosterTxt + ' ' + returnReq.cmpTxt + ' ' + returnReq.monthsTxt + ' 回款报表'"
            header-align="center">
            <el-table-column type="index" width="40"></el-table-column>
            <el-table-column label="购买方">
              <template slot-scope="scope">
                {{ scope.row.BuyCompanyShortName ? scope.row.BuyCompanyShortName : scope.row.BuyCompanyName }}
              </template>
            </el-table-column>
            <el-table-column label="发票号码" prop="CSB_No" width="200"></el-table-column>
            <el-table-column label="回款日期" prop="CSB_No" width="120">
              <template slot-scope="scope">
                {{ scope.row.CSBR_AccountTime | formatDate }}
              </template>
            </el-table-column>
            <el-table-column label=" 回款金额" width="100">
              <template slot-scope="scope">
                <div style="color:red"> {{ scope.row.CSBR_Fee }}元</div>
              </template>
            </el-table-column>
            <el-table-column label="案件号" prop="CS_No" width="160"></el-table-column>
            <!-- <el-table-column label="案件名" prop="CS_DisplayName" width="300"></el-table-column> -->
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button @click="
                  curBill = scope.row
                imageVis = true
                  " type="text" size="small" icon="el-icon-search" title="查看案件详情">
                  扫描件
                </el-button>
                <el-button @click="toCase(scope.row.CSB_CaseID)" type="text" size="small" icon="el-icon-search"
                  title="查看案件详情">
                  案件
                </el-button>
                <el-button v-if="scope.row.CBA_FormID" @click="toForm(scope.row.CBA_FormID)" type="text" size="small"
                  icon="el-icon-search" title="查看审核流程">
                  审核流程
                </el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div style="height: 40px;margin-bottom:20px;">
          <el-pagination layout="total,prev,pager,next,sizes" style="float: right" background
            :current-page.sync="returnReq.pageIndex" :total="returnRes.Total" :page-size="returnReq.pageSize"
            :page-sizes="[10, 15, 20]" @size-change="
              (val) => {
                returnReq.pageSize = val
                getReturns()
              }
            " @current-change="getReturns()"></el-pagination>
        </div>
      </div>
    </div>

    <!-- <div
      style="background: #eaf9f6;margin: 10px;border-radius: 10px;padding: 5px;border-color: #00bf8b;border-width: 2px;border-style: solid;">
      <div style="display: flex;height: 400px;margin:20px">
        <div ref="unbillTeam" style="margin-top:20px;width:100%;"></div>
      </div>
      <div style="display: flex;height: 300px;margin:20px">
        <div ref="unbill" style="margin-top:20px;width:100%;"></div>
      </div>
      <div v-if="unBillVis">
        <el-table style="overflow: auto;margin:20px;width: 98%;" max-height="400px" :data="unBillRes.Items" stripe
          border highlight-current-row>
          <el-table-column :label="unBillReq.hosterTxt + ' ' + unBillReq.cmpTxt + ' 未开票报表'" header-align="center">
            <el-table-column type="index" width="40"></el-table-column>
            <el-table-column label="案件号" prop="CS_No" width="160"></el-table-column>
            <el-table-column label="案件名" prop="CS_DisplayName"></el-table-column>
            <el-table-column label="公估费" prop="ChargeSum" width="160">
              <template slot-scope="scope">
                <div> {{ scope.row.ChargeSum }}元</div>
              </template>
            </el-table-column>
            <el-table-column label="已开票" prop="BillSum" width="160">
              <template slot-scope="scope">
                <div> {{ scope.row.BillSum }}元</div>
              </template>
            </el-table-column>
            <el-table-column label="未开票" prop="UnBillSum" width="160">
              <template slot-scope="scope">
                <div style="color:red"> {{ scope.row.UnBillSum }}元</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="toCase(scope.row.CS_ID)" type="text" size="small" icon="el-icon-search"
                  title="查看案件详情">
                  案件
                </el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div style="height: 40px;margin-bottom:20px;">
          <el-pagination layout="total,prev,pager,next,sizes" style="float: right" background
            :current-page.sync="unBillReq.pageIndex" :total="unBillRes.Total" :page-size="unBillReq.pageSize"
            :page-sizes="[10, 15, 20]" @size-change="
              (val) => {
                unBillReq.pageSize = val
                getUnBillCases()
              }
            " @current-change="getUnBillCases()"></el-pagination>
        </div>
      </div>
    </div> -->

    <div
      style="background: #f3effe;margin: 10px;border-radius: 10px;padding: 5px;border-color: #7f5df2;border-width: 2px;border-style: solid;">
      <!-- <div style="display: flex;height: 400px;margin:20px">
        <div ref="incomeTeam" style="margin-top:20px;width:100%;"></div>
      </div> -->

      <div style="display: flex;height: 10px;margin:10px" v-if="pageData && pageData.incomeStat">
        <el-tag size="medium" hit style="font-size: 20px;"> 开票金额：{{ pageData.incomeStat.chargeSum }}元</el-tag>
        <el-tag size="medium" hit style="font-size: 20px;"> 提成到账金额：{{ pageData.incomeStat.sum }}元</el-tag>
        <el-tag size="medium" hit style="font-size: 20px;"> 未到账提成：{{ pageData.incomeStat.unReturnSum
        }}元</el-tag>
      </div>
      <div style="display: flex;height: 400px;margin:20px">
        <div ref="income" style="margin-top:20px;width:100%;"></div>
      </div>
      <div v-if="incomeVis">
        <el-table style="overflow: auto;margin:20px;width: 98%;" max-height="400px" :data="incomeRes.Items" stripe
          border highlight-current-row>
          <el-table-column :label="incomeReq.monthsTxt + ' 提成报表'" header-align="center">
            <el-table-column type="index" width="40"></el-table-column>
            <el-table-column label="案件号" prop="CS_No" width="160"></el-table-column>
            <el-table-column label="案件名" prop="CS_DisplayName"></el-table-column>
            <el-table-column label="时间" prop="ChargeSum" width="120">
              <template slot-scope="scope">
                <div> {{ scope.row.CEI_Time | formatMonth }}</div>
              </template>
            </el-table-column>
            <el-table-column label="开票金额" prop="ChargeSum" width="120">
              <template slot-scope="scope">
                <div> {{ scope.row.CI_ChargeSum }}元</div>
              </template>
            </el-table-column>
            <el-table-column label="回款金额" prop="ChargeSum" width="120">
              <template slot-scope="scope">
                <div> {{ scope.row.CSBR_Fee }}元</div>
              </template>
            </el-table-column>
            <el-table-column label="总提成" prop="ChargeSum" width="120">
              <template slot-scope="scope">
                <div> {{ scope.row.CI_Fee }}元</div>
              </template>
            </el-table-column>
            <el-table-column label="此次提成" prop="ChargeSum" width="120">
              <template slot-scope="scope">
                <div> {{ scope.row.CEI_Fee }}元</div>
              </template>
            </el-table-column>
            <el-table-column label="未到账提成" prop="ChargeSum" width="120">
              <template slot-scope="scope">
                <div> {{ scope.row.UnReturnEmpIncomeSum }}元</div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="公式" prop="BillSum">
              <template slot-scope="scope">
                <div> {{ scope.row.CEI_Expression }}</div>
              </template>
            </el-table-column> -->
            <el-table-column type="expand" label="其他到账提成" width="120">
              <template slot-scope="scope">
                <div v-for="item in scope.row.EmpIncomes" :key="item.CEI_ID" style="margin: 5px">
                  <template v-if="item.CEI_ID != scope.row.CEI_ID">
                    <span style="margin-left: 20px;"> 回款时间：{{ item.CEI_Time | formatMonth }}</span>
                    <span style="margin-left: 20px;"> 回款金额：{{ item.CSBR_Fee }}元</span>
                    <span style="margin-left: 20px;"> 提成：{{ item.CEI_Fee }}元</span>
                  </template>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="toCase(scope.row.CI_CaseID)" type="text" size="small" icon="el-icon-search"
                  title="查看案件详情">
                  案件
                </el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div style="height: 40px;margin-bottom:20px;">
          <el-pagination layout="total,prev,pager,next,sizes" style="float: right" background
            :current-page.sync="incomeReq.pageIndex" :total="incomeRes.Total" :page-size="incomeReq.pageSize"
            :page-sizes="[10, 15, 20]" @size-change="
              (val) => {
                incomeReq.pageSize = val
                getIncomes()
              }
            " @current-change="getIncomes()"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="imageVis" width="60%" :modal-append-to-body="false" center>
      <!-- <div v-if="curBill && curBill.FL_SrcPath">{{ fileURL + curBill.FL_SrcPath }}</div> -->
      <el-image v-if="curBill && curBill.FL_SrcPath" :src="fileURL + curBill.FL_SrcPath" fit="fill"
        :preview-src-list="[fileURL + curBill.FL_SrcPath]"></el-image>
      <div v-else>未上传发票</div>
    </el-dialog>
  </div>
</template>

<script>
import {
  baseURL,
  fileRoot,
} from '@/config'
import {
  getSalemanStat,

  getHosterUnReturnMonthStat,
  getHosterUnReturnStat,
  getUnReturnBills,
  getUnReturnCases,

  getHosterReturnStat,
  getHosterReturnMonthStat,
  getReturns,

  getHosterCaseStat,
  getHosterLossFeeStat,
  getCases,

  getHosterUnBillStat,
  getUnBillCases,

  getHosterIncomeStat,
  getIncomes
} from '@/api/personal/salemanStas'
import card from '@/views/components/card.vue'
import moment from 'moment';
export default {
  components: { card },
  data: function () {
    return {
      barColors: [
        ['#67C23A', '#E6A23C', '#F56C6C', '#909399', '#409EFF'],//清新自然
        ['#1E88E5', '#42A5F5', '#90CAF9', '#1565C0', '#0D47A1'],//商务蓝
        ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'],//活力多彩
      ],
      statReq: {
        dlgDate1: null,
        dlgDate2: null,
      },
      tempStatReq: {
        dlgDate1: null,
        dlgDate2: null,
      },
      fileURL: baseURL + fileRoot,
      pageData: null,
      curBill: null,


      unReturnReq: {
        pageIndex: 1,
        pageSize: 10,
        cmpTxt: '',
        monthsTxt: '',
        hosterTxt: '',

        buyCmpIds: null,
        month1: null,
        month2: null,
        hosterId: null
      },
      unReturnRes: {
        Items: [],
        Total: 0,
      },


      unReturnCaseReq: {
        pageIndex: 1,
        pageSize: 10,
        cmpTxt: '',
        dlgCmpIds: null,
      },
      unReturnCaseRes: {
        Items: [],
        Total: 0,
      },

      returnReq: {
        pageIndex: 1,
        pageSize: 10,
        cmpTxt: '',
        monthsTxt: '',
        hosterTxt: '',

        buyCmpIds: null,
        month1: null,
        month2: null,
        hosterId: null
      },
      returnRes: {
        Items: [],
        Total: 0,
      },

      caseReq: {
        hosterTxt: '',
        lossFeeTxt: '',
        insureTypeTxt: '',
        hosterId: null,
        lossFee1: null,
        lossFee2: null,
        insureType: null,
        pageIndex: 1,
        pageSize: 10,
      },
      caseRes: {
        Items: [],
        Total: 0,
      },

      unBillReq: {
        pageIndex: 1,
        pageSize: 10,
        cmpTxt: '',
        hosterTxt: '',

        dlgCmpId: null,
        hosterId: null
      },
      unBillRes: {
        Items: [],
        Total: 0,
      },

      incomeReq: {
        pageIndex: 1,
        pageSize: 10,
        monthsTxt: '',
        hosterTxt: '',
        month1: null,
        month2: null,
        hosterId: null
      },
      incomeRes: {
        Items: [],
        Total: 0
      },
      unReturnVis: false,
      unReturnCaseVis: false,
      returnVis: false,
      unBillVis: false,
      incomeVis: false,
      imageVis: false,
      caseVis: false,
    }
  },
  methods: {
    toCase(caseId) {
      window.open(window.location.origin + '/#/caseDetail/caseInfoPage?caseId=' + caseId, '_blank')
    },
    toForm: function (formId) {
      window.open(window.location.origin + '/#/formManage/formInfoPage?formId=' + formId, '_blank')
    },
    getSalemanStat() {
      getSalemanStat(this.statReq).then(({ data }) => {
        this.tempStatReq = { ...this.statReq }
        this.pageData = data
        this.showMainChart(this.pageData.unReturnStat.chartMain, this.$refs.unReturnMain)
        this.showSubChart(this.pageData.unReturnStat.chartSub, this.$refs.unReturnSub)
        this.showBar(this.pageData.unReturnStat.chartTeam, this.$refs.unReturnTeam)
        this.showBar(this.pageData.unReturnStat.chartDlg, this.$refs.unReturnDlg)

        this.showMainChart(this.pageData.returnStat.chartMain, this.$refs.returnMain)
        this.showSubChart(this.pageData.returnStat.chartSub, this.$refs.returnSub)
        this.showBar(this.pageData.returnStat.chartTeam, this.$refs.returnTeam)

        // this.showBar(this.pageData.unBillStat.chart, this.$refs.unbill)
        // this.showBar(this.pageData.unBillStat.chartTeam, this.$refs.unbillTeam)

        this.showBar1(this.pageData.incomeStat.chart, this.$refs.income)
        // this.showBar(this.pageData.incomeStat.chartTeam, this.$refs.incomeTeam)

        this.showMainChart(this.pageData.caseStat.chartMain, this.$refs.caseMain)
        this.showSubChart(this.pageData.caseStat.chartSub, this.$refs.caseSub)
        this.showBar(this.pageData.caseStat.chartTeam, this.$refs.caseTeam)
      })
    },

    getHosterUnReturnStat(hosterId) {
      getHosterUnReturnStat({ hosterId, ...this.tempStatReq }).then(({ data }) => {
        this.showSubChart(data.chartSub, this.$refs.unReturnSub)
        this.showMainChart(data.chartMain, this.$refs.unReturnMain)
      })
    },
    getHosterUnReturnMonthStat() {
      getHosterUnReturnMonthStat({ ...this.unReturnReq, ...this.tempStatReq }).then(({ data }) => {
        this.showSubChart(data, this.$refs.unReturnSub)
      })
    },
    getUnReturnBills() {
      getUnReturnBills({ ...this.unReturnReq, ...this.tempStatReq }).then(({ data }) => {
        this.unReturnRes = data
        this.unReturnVis = true
      })
    },
    getUnReturnCases() {
      getUnReturnCases({ ...this.unReturnCaseReq, ...this.tempStatReq }).then(({ data }) => {
        this.unReturnCaseRes = data
        this.unReturnCaseVis = true
      })
    },

    getHosterReturnStat(hosterId) {
      getHosterReturnStat({ hosterId, ...this.tempStatReq }).then(({ data }) => {
        this.showSubChart(data.chartSub, this.$refs.returnSub)
        this.showMainChart(data.chartMain, this.$refs.returnMain)
      })
    },
    getHosterReturnMonthStat() {
      getHosterReturnMonthStat({ ...this.returnReq, ...this.tempStatReq }).then(({ data }) => {
        this.showSubChart(data, this.$refs.returnSub)
      })
    },
    getReturns() {
      getReturns({ ...this.returnReq, ...this.tempStatReq }).then(({ data }) => {
        this.returnRes = data
        this.returnVis = true
      })
    },

    getHosterCaseStat(hosterId) {
      getHosterCaseStat({ hosterId, ...this.tempStatReq }).then(({ data }) => {
        this.showMainChart(data.chartMain, this.$refs.caseMain)
        this.showSubChart(data.chartSub, this.$refs.caseSub)
      })
    },
    getHosterLossFeeStat() {
      getHosterLossFeeStat({ ...this.caseReq, ...this.tempStatReq }).then(({ data }) => {
        this.showSubChart(data, this.$refs.caseSub)
      })
    },
    getCases() {
      getCases({ ...this.caseReq, ...this.tempStatReq }).then(({ data }) => {
        this.caseRes = data
        this.caseVis = this.caseRes.Items.length > 0
      })
    },

    getHosterUnBillStat(hosterId) {
      getHosterUnBillStat({ hosterId, ...this.tempStatReq }).then(({ data }) => {
        this.showBar(data, this.$refs.unbill)
      })
    },
    getUnBillCases() {
      getUnBillCases({ ...this.unBillReq, ...this.tempStatReq }).then(({ data }) => {
        this.unBillRes = data
        this.unBillVis = true
      })
    },

    getHosterIncomeStat(hosterId) {
      getHosterIncomeStat({ hosterId, ...this.tempStatReq }).then(({ data }) => {
        this.showBar1(data, this.$refs.income)
      })
    },
    getIncomes() {
      getIncomes({ ...this.incomeReq, ...this.tempStatReq }).then(({ data }) => {
        this.incomeRes = data
        this.incomeVis = true
      })
    },

    showMainChart(chartData, chart) {
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          title: {
            text: chartData.title,
            subtext: chartData.subtitle,
            left: 'left',
          },
          tooltip: {
            trigger: 'item',
            formatter: function ({ data }) {
              return `
                ${data.name}<br/>
                ${chartData.itemLabel}: ${data.value}${chartData.itemUnit}<br/>
                ${chartData.subItemLabel}: ${data.subValue}${chartData.subItemUnit}<br/>
              `;
            }
          },
          series: [
            {
              type: 'pie',
              data: chartData.datas,
              radius: '95%',
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
          ],
        }
        myChart.setOption(option)
        myChart.off('click')
        myChart.on('click', ({ data }) => {
          if (chart == this.$refs.unReturnMain) {
            this.unReturnReq.cmpTxt = data.name
            this.unReturnReq.buyCmpIds = data.tag
            this.unReturnReq.month1 = null
            this.unReturnReq.month2 = null
            this.unReturnReq.monthsTxt = ''

            this.getHosterUnReturnMonthStat()
            this.getUnReturnBills()
          }
          else if (chart == this.$refs.returnMain) {
            this.returnReq.cmpTxt = data.name
            this.returnReq.buyCmpIds = data.tag
            this.returnReq.month1 = null
            this.returnReq.month2 = null
            this.returnReq.monthsTxt = ''
            this.getHosterReturnMonthStat()
            this.getReturns()
          }
          else if (chart == this.$refs.caseMain) {
            this.caseReq.insureType = data.name
            this.caseReq.insureTypeTxt = data.name
            this.caseReq.lossFeeTxt = ''
            this.caseReq.lossFee1 = null
            this.caseReq.lossFee2 = null
            this.getHosterLossFeeStat()
            this.getCases()
          }
        });
      }
    },
    showSubChart(chartData, chart) {
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          title: {
            text: chartData.title,
            subtext: chartData.subtitle,
            left: 'left',
          },
          tooltip: {
            trigger: 'item',
            formatter: function ({ data }) {
              return `
                ${data.name}<br/>
                ${chartData.itemLabel}: ${data.value}${chartData.itemUnit}<br/>
                ${chartData.subItemLabel}: ${data.subValue}${chartData.subItemUnit}<br/>
              `;
            }
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '70%'],
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: 'bold'
                }
              },
              data: chartData.datas,
            },
          ],
        }
        myChart.setOption(option)
        myChart.off('click')
        myChart.on('click', ({ data }) => {
          if (chart == this.$refs.unReturnSub) {
            this.unReturnReq.month1 = data.tag.month1
            this.unReturnReq.month2 = data.tag.month2
            this.unReturnReq.monthsTxt = data.name
            this.getUnReturnBills()
          }
          else if (chart == this.$refs.returnSub) {
            this.returnReq.month1 = data.tag.month1
            this.returnReq.month2 = data.tag.month2
            this.returnReq.monthsTxt = data.name
            this.getReturns()
          } else if (chart == this.$refs.caseSub) {
            this.caseReq.lossFeeTxt = data.name
            this.caseReq.lossFee1 = data.tag.lossFee1
            this.caseReq.lossFee2 = data.tag.lossFee2
            this.getCases()
          }
        });
      }
    },
    showBar(chartData, chart) {
      var xAxisDatas = chartData.datas.map((x) => x.name)
      var seriesData1 = chartData.datas
      var seriesData2 = chartData.datas.map((x) => ({ id: x.id, value: x.subValue, tag: x.tag }))
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          // color: this.barColors[1],
          title: {
            text: chartData.title,
            subtext: chartData.subtitle,
            textStyle: { fontSize: 20 },
            left: 'left',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' },
          },
          legend: { align: 'left', right: '10%' },
          xAxis: {
            data: xAxisDatas,
          },
          yAxis: [
            {
              type: 'value',
              name: chartData.itemLabel,
              axisLabel: {
                formatter: '{value}' + chartData.itemUnit,
              },
            },
            {
              type: 'value',
              name: chartData.subItemLabel,
              position: 'right',
              axisLabel: {
                formatter: '{value}' + chartData.subItemUnit,
              },
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: chartData.itemLabel,
              type: 'bar',
              yAxisIndex: 0,
              data: seriesData1,
            },
            {
              name: chartData.subItemLabel,
              type: 'line',
              yAxisIndex: 1,
              data: seriesData2,
            },
          ],
        }
        myChart.setOption(option)
        myChart.off('click')
        myChart.on('click', ({ data }) => {
          if (chart == this.$refs.unbillTeam) {
            this.getHosterUnBillStat(data.id)
            this.unBillReq.hosterTxt = data.name
            this.unBillReq.hosterId = data.id
            this.unBillReq.dlgCmpId = null
            this.unBillReq.cmpTxt = ''
            this.getUnBillCases()
          } else if (chart == this.$refs.unbill) {
            this.unBillReq.cmpTxt = data.name
            this.unBillReq.dlgCmpId = data.id
            this.getUnBillCases()
          } else if (chart == this.$refs.caseTeam) {
            this.getHosterCaseStat(data.id)
            this.caseReq.hosterTxt = data.name
            this.caseReq.hosterId = data.id
            this.caseReq.lossFee1 = null
            this.caseReq.lossFee2 = null
            this.caseReq.lossFeeTxt = ''
            this.caseReq.insureType = null
            this.caseReq.insureTypeTxt = ''
            this.getCases()
          } else if (chart == this.$refs.unReturnTeam) {
            this.unReturnReq.hosterTxt = data.name
            this.unReturnReq.hosterId = data.id
            this.unReturnReq.month1 = null
            this.unReturnReq.month2 = null
            this.unReturnReq.monthsTxt = ''
            this.unReturnReq.buyCmpIds = null
            this.unReturnReq.cmpTxt = ''
            this.getHosterUnReturnStat(data.id)
            this.getUnReturnBills()
          } else if (chart == this.$refs.unReturnDlg) {
            this.unReturnCaseReq.dlgCmpIds = data.tag
            this.unReturnCaseReq.cmpTxt = data.name
            this.getUnReturnCases()
          } else if (chart == this.$refs.returnTeam) {
            this.returnReq.hosterTxt = data.name
            this.returnReq.hosterId = data.id
            this.returnReq.month1 = null
            this.returnReq.month2 = null
            this.returnReq.monthsTxt = ''
            this.returnReq.buyCmpIds = null
            this.returnReq.cmpTxt = ''
            this.getHosterReturnStat(data.id)
            this.getReturns()
          }
        });
      }
    },

    showBar1(barData, chart) {
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          // title: {
          //   text: barData.title.text,
          //   subtext: barData.title.subtext,
          //   textStyle: { fontSize: 20 },
          //   left: 'left',
          // },
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' },
          },
          legend: { align: 'left', right: '10%' },
          xAxis: barData.xAxis,
          yAxis: barData.yAxis,
          series: barData.series
        }
        myChart.setOption(option)
        myChart.off('click')
        myChart.on('click', ({ data }) => {
          if (chart == this.$refs.income) {
            console.log(data.name)
            this.incomeReq.monthsTxt = data.name
            this.incomeReq.month1 = data.tag.month1
            this.incomeReq.month2 = data.tag.month2
            this.getIncomes()
          }
        });
      }
    },
  },
  mounted: function () {
    this.statReq.dlgDate1 = moment().subtract(1, 'year').startOf('year').format('YYYY-MM-DD HH:mm:ss')
    this.getSalemanStat()
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: 100%;
}
</style>

<style>
.main .el-table .warning-row {
  background-color: oldlace;
}

.main .el-tabs__content {
  height: 100%;
}
</style>